<template>
  <div>
    <el-table
      :data="opinionList"
      border
      style="width: 95%;margin:30px 20px"
      :header-cell-style="{background:'#f5f5f6',color:'#9EA0A5'}"
    >
      <el-table-column prop="id" label="id" width="180"></el-table-column>
      <el-table-column prop="content" label="意见内容" width="180"></el-table-column>
      <el-table-column prop="pic" label="图片">
        <template slot-scope="scoped">
          <div>
            <viewer>
              <img :src="scoped.row.pic" style="width:120px;height:80px" alt />
            </viewer>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="realName" label="添加人"></el-table-column>
      <el-table-column prop="phone" label="添加人手机号"></el-table-column>
      <el-table-column fixed="right" label="操作" width="180">
        <template slot-scope="scope">
          <el-button type="danger" size="small" @click="handlerDel(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="pagination" style="margin-bottom:20px;">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[5,10, 15, 20,25]"
        :page-size="optonQuery.pageSize"
        :current-page="optonQuery.pageNumber"
        layout="total, sizes, prev, pager, next, jumper"
        :total="count"
        class="management_page"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { opinionList, opinionDel } from "../../utils/api";
export default {
  data() {
    return {
      // 意见列表
      opinionList: [],
      // 列表分页
      optonQuery: {
        //   设备id
        deviceId: "",
        pageNumber: 1,
        pageSize: 5
      },
      //   列表总条数
      count: 0
    };
  },
  created() {
    const result = JSON.parse(window.sessionStorage.getItem("facilityData"));
    this.optonQuery.deviceId = result.id;
    this.getopinionList();
  },
  methods: {
    // 获取意见列表
    getopinionList() {
      this.postRequest(opinionList, this.optonQuery).then(res => {
        if (res.code == 200) {
          this.opinionList = res.data.data;
          this.count = res.data.count;
        }
      });
    },
    // 点击删除意见
    handlerDel(id) {
      const params = {
        userId: window.sessionStorage.getItem("userId"),
        id: id
      };
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.postRequest(opinionDel, params).then(res => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.getopinionList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //分页
    handleSizeChange(val) {
      //每页条数
      this.optonQuery.pageSize = val;
      this.getopinionList();
    },
    handleCurrentChange(val) {
      //当前第几页
      this.optonQuery.pageNumber = val;
      this.getopinionList();
    }
  }
};
</script>

<style>
</style>